<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <el-dialog :visible.sync="show" width="650px" :destroy-on-close="true" title="土拍消息编辑" :close-on-click-modal="false">
        <el-form size="small" label-position="right" label-width="150px" v-loading="loading">

            <el-form-item label="编号" label-position="left">
                <el-input style="width: 400px" v-model="currentItem.internal_id" />
            </el-form-item>

            <el-form-item  label="区域" label-position="left">
                <city-district-selector size="small" custom-style="width: 400px" v-model="currentItem.district_id" />
            </el-form-item>

            <el-form-item label="位置" label-position="left">
                <el-input style="width: 400px" v-model="currentItem.street" />
            </el-form-item>

            <el-form-item label="楼面价（元/m²）" label-position="left">
                <el-input style="width: 400px" type="Number" v-model="currentItem.floor_price" />
            </el-form-item>

            <el-form-item label="竞得方" label-position="left">
                <el-input style="width: 400px" v-model="currentItem.winner" />
            </el-form-item>

            <el-form-item label="起拍价（元/m²）" label-position="left">
                <el-input style="width: 400px" type="Number" v-model="currentItem.start_price" />
            </el-form-item>

            <el-form-item label="成交价（元/m²）" label-position="left">
                <el-input style="width: 400px" type="Number" v-model="currentItem.final_price" />
            </el-form-item>

            <el-form-item label="出让面积（m²）" label-position="left">
                <el-input style="width: 400px" type="Number" v-model="currentItem.sell_area" />
            </el-form-item>

            <el-form-item label="成交总价（万元）" label-position="left">
                <el-input style="width: 400px" type="Number" v-model="currentItem.final_total_price" />
            </el-form-item>

            <el-form-item label="最大容积率" label-position="left">
                <el-input style="width: 400px" type="Number" v-model="currentItem.max_plot_ratio" />
            </el-form-item>

            <el-form-item label="土地用途" label-position="left">
                <el-input style="width: 400px" type="text" v-model="currentItem.land_use" />
            </el-form-item>

            <el-form-item label="出让年限" label-position="left">
                <el-input style="width: 400px" type="text" v-model="currentItem.sell_year" />
            </el-form-item>

            <el-form-item label="成交日期" label-position="left">
                <el-date-picker style="width: 400px" value-format="yyyy-MM-dd HH:mm:ss" v-model="currentItem.final_date" type="datetime" placeholder="选择日期" />
            </el-form-item>

            <el-form-item label="状态" label-position="left">
                <!-- <el-select style="width: 400px" v-model="currentItem.status" placeholder="请选择">
                    <el-option label="待出让" :value="0" />
                    <el-option label="已成交" :value="1" />
                    <el-option label="流拍" :value="2" />
                    <el-option label="终止" :value="3" />
                </el-select> -->
                <enumeration-selector
                    custom-style="width:350px"
                    v-model="currentItem.status"
                    placeholder="请选择状态"
                    cat="tupai_status"
                    :radio="true"
                ></enumeration-selector>
            </el-form-item>

            <el-form-item label="发布状态" label-position="left">
                <el-switch v-model="currentItem.is_public" active-text="已发布" inactive-text="未发布" ></el-switch>
            </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button size="mini" type="default" icon="el-icon-close" @click="cancleHandle" :disabled="loading">取消</el-button>
            <el-button size="mini" type="primary" icon="el-icon-check" @click="submitHandle" :disabled="loading">确定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import ImagePicker from "@/components/ImagePicker";
import DateTimePicker from "@/components/DateTimePicker";
import CityDistrictSelector from "@/components/CityDistrictSelector";
import PostsSelector from "@/components/PostsSelector";
import {
    createTupai,
    updateTupai,
} from "@/api/tupai";
export default {
    name: "tupaiForm",
    components: { ImagePicker, DateTimePicker, CityDistrictSelector },

    EnumerationSelectorprops: {},
    data () {
        return {
            currentItem: {},
            show: false,
            loading: false,
        };
    },
    computed: {
        // canSubmit: function () {
        //     var h = this.currentItem;
        //     if (h.desc && h.name && h.expired_at) {
        //         return true;
        //     }
        //     return false;
        // },
    },
    watch: {},
    methods: {
        openDialog: function (item) {
            this.currentItem = item;
            this.show = true;
        },

        cancleHandle: function () {
            this.show = false;
            this.currentItem = {};
        },
        submitHandle: function () {
            var isok = this.validate(this.currentItem);
            if (!isok) {
                return;
            }
            var isNew = !this.currentItem.id;
            if (isNew) {
                return this.doCreate();
            }
            return this.doUpdate();
        },

        doCreate: function () {
            this.loading = true;
            createTupai(this.currentItem).then((resp) => {
                this.loading = false;
                if (resp.status == 0) {
                    this.$message.success("创建成功");
                    this.loading = false;
                    this.show = false;
                    this.$emit("change", {});
                }
            });
        },

        doUpdate: function () {
            var _this = this;
            this.loading = true;
            updateTupai(this.currentItem).then((resp) => {
                this.loading = false;
                if (resp.status == 0) {
                    _this.$message.success("保存成功");
                    _this.$emit("change", {});
                    this.show = false;
                    _this.loading = false;
                }
            });
        },

        validate: function (data) {
            // TODO
            if (!data.internal_id) {
                this.$message.error("请填写编号");
                return false;
            }
            if (!data.district_id) {
                this.$message.error("请选择区域");
                return false;
            }
            if (!data.street) {
                this.$message.error("请输入位置");
                return false;
            }
            if (!data.floor_price) {
                this.$message.error("请输入楼面价");
                return false;
            }
            if (!data.winner) {
                this.$message.error("请输入竞得方");
                return false;
            }
            if (!data.start_price) {
                this.$message.error("请输入起拍价");
                return false;
            }
            if (!data.final_price) {
                this.$message.error("请输入成交价");
                return false;
            }
            if (!data.sell_area) {
                this.$message.error("请输入出让面积");
                return false;
            }
            if (!data.final_total_price) {
                this.$message.error("请输入成交总价");
                return false;
            }
            if (!data.max_plot_ratio) {
                this.$message.error("请输入最大容积率");
                return false;
            }
            if (!data.land_use) {
                this.$message.error("请输入土地用途");
                return false;
            }
            if (!data.sell_year) {
                this.$message.error("请输入出让年限");
                return false;
            }
            if (!data.final_date) {
                this.$message.error("请输入成交日期");
                return false;
            }
            if (data.status == undefined) {
                this.$message.error("请选择状态");
                return false;
            }
            if (data.is_public == undefined) {
                this.$message.error("请选择发布状态");
                return false;
            }
            return true;
        },
    },
};
</script>

<style scoped>
.tips ul {
    padding: 0;
    margin: 0;
}

.tips {
    font-size: 12px;
    color: #999;
}

.show-more {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;
}

.icon-uploader {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    width: 100%;
    min-height: 100px;
    border: 2px dashed #f4f4f4;
}

.icon-uploader .el-upload {
    width: 100%;
    height: 100%;
}
</style>
